<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="#"/>
  <title>video-chat</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    * {
      padding:0px;
      margin:0px;
    }
    html,body,.wrap {
      width: 100%;
      height: 100%;
    }
    .content {
      height: 100%;
    }
    .ho{
      height: 100%;
      overflow: hidden;
      padding:10px;
    }
    div.panel{
      display: flex;
      flex-direction: column;
      height: 100%;
      background:none;
    }
    .panel-body {
      flex: 1;
      overflow: auto;
    }
    .h100 {
      height: 100%;
    }
    .p-hint {
      text-align: right;
      color: #ccc;
    }
    /*  */
    .chartInput {
      display:none;
    }
    .chartBox {
      position: absolute;
      width:300px;
      height: 400px;
      bottom: 0px;
      right: 0px;
      margin: 0 10px 80px 0px;
    }
    .rightBox {
      display: inline-block;
      width:25%;
      height:100%;
      overflow: auto;
      background-color:#333;
    }
    .h100 {
      width:100%;
    }
    .center {
      display: inline-block;
      width:75%;
      height:100%;
    }
    .mainVideo {
      width:100%;
      height:calc(100vh - 80px);
      background-color:#011336;
    }
    .bottombtnlist {
      height:80px;
      width:100%;
      background-color:cornflowerblue;
      /* background-color:#011336; */
    }
    .mainBox {
      display: flex;
      box-sizing: border-box;
      border:1px solid #ddd;
    }
    .videos {
      width:auto;
      height:100%;
    }
    .videoList {
      width:100%;
      height:auto;
      box-sizing: border-box;
      border:1px solid #ddd;
    }
    .bottombtnlist {
      display:flex;
    }
    .bottombtnlist > div {
      flex:1;
      text-align: center;
      line-height:80px;
    }
    .bottombtnlist span {
      display: inline-block;
      width:50px;
      height:50px;
      margin-top:15px;
    }
    .bottombtnlist img {
      width:100%;
      height:100%;
      display:block;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">
      <div class="h100 mainBox">
        <div class="rightBox">
          <div class="video-box" id="videoBox">
          </div>
        </div>
        <div class="center">
          <div class="mainVideo video-box">
            <video src="" class="videos" id="localVideo" autoplay controls></video>
          </div>
          <div class="bottombtnlist">
            <div  id="testAjax">
              <span title="邀请成员">
                  <img src="./image/inviteMembers_inter.png">
              </span>
            </div>
            <div>
              <span title="全部静音">
                  <img src="./image/muteAll_inter.png">
              </span>
            </div>
            <div>
              <span title="关闭画面">
                  <img src="./image/closeScreenA_inter.png">
              </span>
            </div>
            <div>
              <span title="共享屏幕">
                  <img src="./image/shareScreen_inter.png">
              </span>
            </div>
            <div>
              <span title="共享文件">
                  <img src="./image/sharedFiles_inter.png">
              </span>
            </div>
            <div>
              <span title="分屏显示">
                  <img src="./image/splitScreen_inter.png">
              </span>
            </div>
            <div>
              <span title="视频录像">
                  <img src="./image/videoRecording_inter.png">
              </span>
            </div>
            <div>
              <span title="截图">
                  <img src="./image/screenshot_inter.png">
              </span>
            </div>
            <div title="关闭" class="closeBtn">
              <span>
                  <img src="./image/closeBtn_inter.png">
              </span>
            </div>
          </div>
        </div>
      </div>
        <div class="chartBox ho">
          <div class="panel">
            <div id="textBox" class="panel-body">
            </div>
            <div class="panel-bottom chartInput">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="输入消息..." id="textMsg" onkeyup="handleKey(event)">
                <span class="input-group-btn">
                  <button class="btn btn-default" onclick="sendTextMsg()" type="button">发送</button>
                </span>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
    

  <!-- 断线重连 -->
  <script src="./js/reconnecting-websocket.min.js"></script>
  <script src="/js/adapter.js"></script>
  <script src="./js/clientCopy.js"></script>
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    // 播放对象
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){
              
              //Ajax调用处理
            $.ajax({
               type: "GET",
               url: "http://192.168.1.230:8888/iot/jkArea/listNoPage",
               data: "nodeType=1",
               success: function(data){
                       console.log("3333",data)
                  }
            });
            
         });
    });
</script>    
</body>
</html>
